<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/1/5
  Time: 13:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
    <title>Title</title>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
    <c:forEach items="${list}" var="item">
        <div class="container">
            <input type="hidden" name="awards_id" value="${item.awards_id}">
            <input type="hidden" name="awards_type" value="${item.awards_type}">
            <input type="hidden" name="active_id" value="${item.active_id}">
        </div>
    </c:forEach>


    <script>

        $(function () {
            $('.container').click(function () {
                var awards_id = $(this).find("input[name=awards_id]").val();
                var awards_type = $(this).find("input[name=awards_type]").val();
                var active_id = $(this).find("input[name=active_id]").val();
                var url = "./chartData?awards_id="+awards_id+"&awards_type="+awards_type+"&active_id="+active_id;
                var that = this;
                $.getJSON(url, function(json) {
                    $(that).highcharts({
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: json.adwards_name
                        },
                        subtitle: {
                            text: 'Source: WorldClimate.com'
                        },
                        xAxis: {
                            categories: json.user_names,
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '票数'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.f} 票</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                            name: '票数',
                            data: json.vote_counts

                        }]
                    });
                })
            });

            $('.container').click();

        });
    </script>
</body>
</html>
